<nav data-cy="navbar" class="navbar navbar-dark navbar-expand-md bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand logo" routerLink="/" (click)="collapseNavbar()">
      <span class="logo-img"></span>
      <span class="navbar-title" jhiTranslate="global.title">JhipsterSampleApplication</span>
      <span class="navbar-version">{{ version }}</span>
    </a>
    <a
      class="navbar-toggler d-lg-none"
      href="javascript:void(0);"
      data-toggle="collapse"
      data-target="#navbarResponsive"
      aria-controls="navbarResponsive"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="toggleNavbar()"
    >
      <fa-icon icon="bars" />
    </a>
    <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed()">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
          <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
            <span>
              <fa-icon icon="home" />
              <span jhiTranslate="global.menu.home">Home</span>
            </span>
          </a>
        </li>
        @if (account() !== null) {
          <li
            ngbDropdown
            class="nav-item dropdown pointer"
            display="dynamic"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{ exact: true }"
          >
            <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
              <span>
                <fa-icon icon="th-list" />
                <span jhiTranslate="global.menu.entities.main">Entities</span>
              </span>
            </a>
            <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
              <li>
                <a
                  class="dropdown-item"
                  routerLink="/bank-account"
                  routerLinkActive="active"
                  [routerLinkActiveOptions]="{ exact: true }"
                  (click)="collapseNavbar()"
                >
                  <fa-icon icon="asterisk" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.entities.bankAccount">Bank Account</span>
                </a>
              </li>
              <li>
                <a
                  class="dropdown-item"
                  routerLink="/label"
                  routerLinkActive="active"
                  [routerLinkActiveOptions]="{ exact: true }"
                  (click)="collapseNavbar()"
                >
                  <fa-icon icon="asterisk" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.entities.label">Label</span>
                </a>
              </li>
              <li>
                <a
                  class="dropdown-item"
                  routerLink="/operation"
                  routerLinkActive="active"
                  [routerLinkActiveOptions]="{ exact: true }"
                  (click)="collapseNavbar()"
                >
                  <fa-icon icon="asterisk" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.entities.operation">Operation</span>
                </a>
              </li>
              <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
            </ul>
          </li>
        }
        <li
          *jhiHasAnyAuthority="'ROLE_ADMIN'"
          ngbDropdown
          class="nav-item dropdown pointer"
          display="dynamic"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
        >
          <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu" data-cy="adminMenu">
            <span>
              <fa-icon icon="users-cog" />
              <span jhiTranslate="global.menu.admin.main">Administration</span>
            </span>
          </a>
          <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="admin-menu">
            <li>
              <a
                class="dropdown-item"
                routerLink="/authority"
                routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }"
                (click)="collapseNavbar()"
              >
                <fa-icon icon="asterisk" [fixedWidth]="true" />
                <span jhiTranslate="global.menu.entities.adminAuthority">Authority</span>
              </a>
            </li>
            <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
            <li>
              <a class="dropdown-item" routerLink="/admin/user-management" routerLinkActive="active" (click)="collapseNavbar()">
                <fa-icon icon="users" [fixedWidth]="true" />
                <span jhiTranslate="global.menu.admin.userManagement">User management</span>
              </a>
            </li>
            <li>
              <a class="dropdown-item" routerLink="/admin/metrics" routerLinkActive="active" (click)="collapseNavbar()">
                <fa-icon icon="tachometer-alt" [fixedWidth]="true" />
                <span jhiTranslate="global.menu.admin.metrics">Metrics</span>
              </a>
            </li>
            <li>
              <a class="dropdown-item" routerLink="/admin/health" routerLinkActive="active" (click)="collapseNavbar()">
                <fa-icon icon="heart" [fixedWidth]="true" />
                <span jhiTranslate="global.menu.admin.health">Health</span>
              </a>
            </li>
            <li>
              <a class="dropdown-item" routerLink="/admin/configuration" routerLinkActive="active" (click)="collapseNavbar()">
                <fa-icon icon="cogs" [fixedWidth]="true" />
                <span jhiTranslate="global.menu.admin.configuration">Configuration</span>
              </a>
            </li>
            <li>
              <a class="dropdown-item" routerLink="/admin/logs" routerLinkActive="active" (click)="collapseNavbar()">
                <fa-icon icon="tasks" [fixedWidth]="true" />
                <span jhiTranslate="global.menu.admin.logs">Logs</span>
              </a>
            </li>
            @if (openAPIEnabled()) {
              <li>
                <a class="dropdown-item" routerLink="/admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
                  <fa-icon icon="book" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.admin.apidocs">API</span>
                </a>
              </li>
            }
            @if (!inProduction()) {
              <li>
                <a class="dropdown-item" href="./h2-console/" target="_tab" (click)="collapseNavbar()">
                  <fa-icon icon="database" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.admin.database">Database</span>
                </a>
              </li>
            }
          </ul>
        </li>
        @if (languages && languages.length > 1) {
          <li ngbDropdown class="nav-item dropdown pointer" display="dynamic">
            <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
              <span>
                <fa-icon icon="flag" />
                <span jhiTranslate="global.menu.language">Language</span>
              </span>
            </a>
            <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="languagesnavBarDropdown">
              @for (language of languages; track $index) {
                <li>
                  <a
                    class="dropdown-item"
                    [jhiActiveMenu]="language"
                    href="javascript:void(0);"
                    (click)="changeLanguage(language); collapseNavbar()"
                    >{{ language | findLanguageFromKey }}</a
                  >
                </li>
              }
            </ul>
          </li>
        }
        <li
          ngbDropdown
          class="nav-item dropdown pointer"
          display="dynamic"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }"
        >
          @let accountRef = account();
          <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu" data-cy="accountMenu">
            @if (!accountRef?.imageUrl) {
              <span>
                <fa-icon icon="user" />
                <span jhiTranslate="global.menu.account.main">Account</span>
              </span>
            } @else {
              <span>
                <img [src]="accountRef!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
              </span>
            }
          </a>
          <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="account-menu">
            @if (accountRef !== null) {
              <li>
                <a
                  class="dropdown-item"
                  routerLink="/account/settings"
                  routerLinkActive="active"
                  (click)="collapseNavbar()"
                  data-cy="settings"
                >
                  <fa-icon icon="wrench" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.account.settings">Settings</span>
                </a>
              </li>
              <li>
                <a
                  class="dropdown-item"
                  routerLink="/account/password"
                  routerLinkActive="active"
                  (click)="collapseNavbar()"
                  data-cy="passwordItem"
                >
                  <fa-icon icon="lock" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.account.password">Password</span>
                </a>
              </li>
              <li>
                <a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
                  <fa-icon icon="sign-out-alt" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.account.logout">Sign out</span>
                </a>
              </li>
            } @else {
              <li>
                <a class="dropdown-item" (click)="login()" id="login" data-cy="login">
                  <fa-icon icon="sign-in-alt" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.account.login">Sign in</span>
                </a>
              </li>
              <li>
                <a
                  class="dropdown-item"
                  routerLink="/account/register"
                  routerLinkActive="active"
                  (click)="collapseNavbar()"
                  data-cy="register"
                >
                  <fa-icon icon="user-plus" [fixedWidth]="true" />
                  <span jhiTranslate="global.menu.account.register">Register</span>
                </a>
              </li>
            }
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
